<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/user1.png"></image>
		</view>
		<view class="login-title">
			<view class="title">登录帐号</view>
		</view>
		<view class="login-form">
			<view class="phone">
				<view class="title"  >手机号</view>
				<input type="number"   maxlength="11" value="" placeholder="请输入手机号码" v-model="mobile"/>
			</view>
			<view class="code"> 
				<view class="title" style="width:30%">验证码</view>
				<view class="item"  >
					<input type="number"  maxlength="6"  value="" placeholder="填写验证码" v-model="code"/>
					<input type="button" v-if="show" class="code-msg" @click="fasong()" value="获取验证码"/>
					<input type="button" v-else class="code-msg code-msg-check" :value="payRepeat"/>

				</view>
			</view>
		</view>
		<view class="login-submit">
			<view class="btn" @click="login()">登录</view>
		</view>

		<!-- <view class="login_title">登录</view>
		<view class="login_log">
			<view class="login_h"></view>
			<view class="login_in">LOG IN</view>
			<view class="login_h"></view>
		</view>
		<view class="login_form">
			<view class="password">
				<view class="password_title">
					<image src="../../static/phone.png" mode=""></image>账号/手机号
				</view>
				<input type="number" maxlength="11" value="" v-model="account"/>
			</view>
			<view class="password">
				<view class="password_title">
					<image src="../../static/psw.png" mode=""></image>请输入密码
				</view>
				<input type="password" minlength="6" maxlength="18" value="" v-model="password"/>
			</view>
		</view>
		<view class="denglu" v-if="account ==''||password ==''">登录</view>
		<view class="denglu1" v-else @click="login()">登录</view>
		<view class="zhuce">还没有账号？ <text @click="zhuce()">立即注册</text></view>
		<view class="wangji" @click="wangji()">忘记密码？</view>
		 -->
		<!-- <view class="sure">
			<text class="yes iconfont icon-weixuanzhong" v-if="show" @click="yes()"></text>
			<text class="yes1 iconfont icon-xuanzhong" v-else @click="no()"></text>
			<text class="suretext">我已同意本平台<text @click="yonghu()">《用户协议》</text>和<text @click="yinsi()">《隐私协议》</text></text>
		</view> -->
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';	
	export default {
		data() {
			return {
				// show:true,
				account:'',
				password:'',
				mobile:'',
				code:'', // 验证码
				payRepeat:'60秒后重新发送',
				show:true // 获取验证码
			}
		},
		onLoad() {

		},
		methods: {
			login(){
				//登录
				var _this = this
				// if(_this.show){
				// 	getdata.shou('请勾选用户协议')
				// }else{
					if(_this.mobile=='' || _this.mobile.length==0){
						getdata.shou('请输入手机号');
						return;
					}
					if(_this.code=='' || _this.code.length==0){
						getdata.shou('请输入验证码');
						return;
					}
					// 参数暂未明确
					var data = {
						account:_this.mobile,
						password:_this.code
					}
					uni.showLoading({
						title: '登录中'
					});
					uni.request({
						url: getdata.websiteUrl + '/user/login',
						data: data,
						header:{'content-type': "application/x-www-form-urlencoded"},
						dataType: 'json',
						method: 'POST',
						success: res => {
							console.log(res)
							uni.hideLoading();
							if (res.data.code == 1) {
								getdata.shou(res.data.msg);
								uni.setStorageSync('token', res.data.data.userinfo.token);
								uni.switchTab({
									url: '../home/home'
								});
							}else{
								getdata.shou(res.data.msg);
							} 
						},
						fail: res => {
							uni.hideLoading();
							getdata.shou('服务器断开链接')
						}
					});
				// }
				
			},
			fasong(){
				//发送验证码
				var _this = this
				if(getdata.checkMobile(this.mobile) == false){
					getdata.shou('手机号格式不正确');
				}else{
					var retime = 60;
					var data = {
						mobile:_this.mobile,
						event:'register'
					}
					uni.showLoading({
					    title: '发送中'
					});
					uni.request({
						url: getdata.websiteUrl + '/sms/send',
						data:data,
						method: 'POST',
						header:{'content-type': "application/x-www-form-urlencoded"},
						dataType:'json',
						success: res => {
							console.log(res)
							uni.hideLoading();
							if(res.data.code == 1){ 
								getdata.shou('验证码发送成功')
								var reyzm = setInterval(function() {	
									retime--;
									_this.show = false;
									_this.payRepeat = retime + '秒后重发';
									if (retime == 0) {
										retime = 60;
										clearInterval(reyzm);
										_this.show = true;
									}
								}, 1000);
								// _this.captcha = res.data.data
							}else{
								getdata.shou(res.data.msg);
							}
						},
						fail: err => {
							uni.hideLoading();
							getdata.shou('服务器断开链接')
						}
					});
				}
				
				
			},
			// yes(){
			// 	this.show = false
			// },
			// no(){
			// 	this.show = true
			// },
			zhuce(){
				uni.navigateTo({
				    url: 'zc_phone'
				});
			},
			wangji(){
				uni.navigateTo({
				    url: 'find_password'
				});
			},
			yonghu(){
				uni.navigateTo({
				    url: 'yonghu'
				});
			},
			yinsi(){
				uni.navigateTo({
				    url: 'yinsi'
				});
			},
		}
	}
</script>

<style lang="scss">
@import '../../static/iconfont/iconfont.css';		
/** 修改样式* */
.logo{
	padding:120rpx 120rpx 0 120rpx; 
}
.logo image{
	width:100%;
}
.login-title{
	padding: 40rpx 200rpx;
	text-align: center;
	
}
.login-title .title{
	color: rgb(0,194,196);
	font-size: 66rpx;
	border-bottom: 4rpx solid rgb(0,194,196);
	display: inline;
	padding-bottom: 30rpx;
}
.login-form{
	margin-top: 60rpx;
	width: 100%;
	box-sizing: border-box;
	padding: 0 75rpx;

	.phone{
		display: flex;
		align-items: center;
		justify-content: space-around;
		.title{
			width:30%;
		}
		input{
			flex: 1;
		}
	}
	input{
		border:4rpx solid rgb(172,235,199);
		padding: 15rpx;
	}
	.code{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 50rpx;
		.title{
			width:30%;	
		}
		.item{
			display:flex;
			flex:1;    
			align-items: center;
			input{
				width:40%;margin-right:10rpx;
			}
			.code-msg{
				flex: 1;
				text-align: center;
				background: #00c2c4;
				font-size: 15px;
				border: 2px solid #00c2c4;
				color: white;
				margin: 0;
			}
			.code-msg-check{
								border: 2px solid rgb(158, 166, 174);
				background-color: rgb(158, 166, 174);
			}
		}
	}
}

.login-submit{
	padding: 60rpx 75rpx;
	.btn{
		background-color: #00c2c4;
		color: white;
		padding: 20rpx;
    	text-align: center;
	}
}

/**旧样式 */
.login_title{
	font-size: 66rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
	text-align: center;
	margin-top: 100rpx;
}	
.login_log{
	display: flex;
	width: 320rpx;
	margin: 30rpx auto 0;
	justify-content: space-between;
	align-items: center;
	.login_h{
		width: 45rpx;
		height: 1rpx;
		background: #000;
	}
	.login_in{
		font-size: 26rpx;
		font-family: PingFang SC;
		color: #000000;
		
	}
}	
.login_form{
	margin-top: 100rpx;
	width: 100%;
	box-sizing: border-box;
	padding: 0 75rpx;
	.password{
		width: 100%;
		border-bottom: 2rpx solid #E0E0E0;
		margin-bottom: 40rpx;
		.password_title{
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #8D8D97;
			display: flex;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
		input{
			width: 100%;
			height: 70rpx;
		}
	}
}
.denglu{
	width: 500rpx;
	height: 92rpx;
	line-height: 92rpx;
	background: #ECECEC;
	box-shadow: 0px 3rpx 15rpx 1rpx rgba(236, 236, 236, 0.81);
	border-radius: 46rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	color: #999999;
	text-align: center;
	margin: 280rpx auto 0;
}	
.denglu1{
	width: 500rpx;
	height: 92rpx;
	line-height: 92rpx;
	background: #1578F2;
	box-shadow: 0px 3rpx 15rpx 1rpx rgba(21, 120, 242, 0.81);
	border-radius: 46rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	color: #ffffff;
	text-align: center;
	margin: 280rpx auto 0;
}
.zhuce{
	font-size: 24rpx;
	font-family: PingFang SC;
	color: #8D8D97;
	margin: 120rpx auto 0;
	text-align: center;
	text{
		color: #1578F2;
	}
}
.wangji{
	font-size: 24rpx;
	font-family: PingFang SC;
	color: #8D8D97;
	margin: 65rpx auto 0;
	text-align: center;
}
.sure{
	width: 100%;
	text-align: center;
	margin: 100rpx 0 100rpx;
	// position: absolute;
	// left:0;
	// bottom: 100rpx;
	.yes{
		font-size: 22rpx;
		color: #999999;
	}
	.yes1{
		font-size: 22rpx;
		color: #1578F2;
	}
	.suretext{
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #8D8D97;
		margin-left: 15rpx;
		text{
			color:#1578F2 ;
		}
	}
}
</style>
